<template>
  <app-flex :class="className" :style="style">
    <div class="app-desc-item__label" v-if="label">{{ label }}</div>
    <div class="app-desc-item__value">
      <slot>
        {{ value }}
      </slot>
    </div>
  </app-flex>
</template>
<script setup>
const props = defineProps({
  label: String,
  value: [String, Number],
  gridColumn: String,
})

const className = computed(() => {
  return {
    'app-desc-item': true,
  }
})

const style = computed(() => {
  return {
    'grid-column': props.gridColumn,
  }
})
</script>
<style lang="scss" scoped>
.app-desc-item {
  display: flex;
  align-items: baseline;
  color: #252a30;
}
.app-desc-item__value {
  flex: 1;
  overflow: hidden;
}
</style>
